<template>
	<view class="machine-monitor-content bg">
		<u-sticky>
            <!--<view class="flex-center">
                <u-button icon="warning" :type="errorCount ? 'error' : 'primary'">报警: {{ errorCount }}</u-button>
            </view>
			<view class="header-box">
				<view class="header-box-item" @click="selectWorkshopPopupOptionState = true" style="border-right: solid 1rpx #5c7cf7;">
					<view class="header-box-item-val">{{ searchParams.workshopName || '暂无' }}</view>
					<u-icon name="arrow-down" size="14" color="#c5c8ce"></u-icon>
				</view>
				<view class="header-box-item" @click="selectProcessPopupOptionState = true">
					<view class="header-box-item-val">{{ searchParams.processName || '工序' }}</view>
					<u-icon name="arrow-down" size="14" color="#c5c8ce"></u-icon>
				</view>
			</view>-->
            <view style="padding: 24rpx 32rpx;background: #fff;">
                <view class="legend-box">
                    <view class="legend-box-item">
                        <view class="legend-box-item-title">
                            <view class="legend-box-item-circle" :style="{background: '#19be6b'}"></view>
                            <view>正常</view>
                        </view>
                        <view class="legend-box-val">{{ runningCount || 0 }}</view>
                    </view>
                    <view class="legend-box-item">
                        <view class="legend-box-item-title">
                            <view class="legend-box-item-circle" :style="{background: 'red'}"></view>
                            <view>报警</view>
                        </view>
                        <view class="legend-box-val">{{ errorCount || 0 }}</view>
                    </view>
                </view>
            </view>
		</u-sticky>
		<view class="monitor-content">
			<view class="margin-top-10">
				<u-loading-icon :show="contentLoading"></u-loading-icon>
			</view>
			<view v-show="!contentLoading">
				<view v-for="(item, index) in areaList" :key="item.processName" class="category-item">
					<view class="category-item-header">
						<view class="category-item-process-icon"></view>
						<view class="category-item-process-name">{{ item.name }}</view>
					</view>
					<view class="category-item-list-container">
						<view
                            v-for="(processItem, processIndex) in item.processList" :key="processIndex"
                            class="process-item"
                            hover-class="hover-class"
                            @click="onDetailBtn(index, processIndex)"
                        >
                            <view class="process-item-title">
                                <view>{{ processItem.processName }}</view>
                                <!--<view class="process-item-th">{{ processItem.temHum }}</view>-->
                            </view>
                            <view class="process-item-content">
                                <view
                                    v-for="(thItem, thIndex) in processItem.thList"
                                    :key="thIndex"
                                    class="process-item_th-item"
                                >
                                    <view class="process-item-content-val" style="width: 100%;display: flex;justify-content: center;align-items: center;">
                                        <u-icon :name="thItem.status ? 'warning' : 'checkmark-circle'" :color="thItem.status ? '#ed4014' : '#19be6b'" :size="thItem.status ? '18' : '16'"></u-icon>
                                        <view style="" class="flex-start-center">
                                            <text>{{ thItem.name }}:</text>
                                            <view style="width: 76rpx;">{{ thItem.val }}</view>

                                        </view>
                                    </view>
                                    <!--<view class="process-item-content-set-val">设定:{{ thItem.setRange }}</view>-->
                                </view>
                            </view>
                        </view>
					</view>
				</view>
			</view>
		</view>
		<detail-modal
            :modal-state="detailModalState"
            :selectedMachineItem="selectedMachineItem"
			@on-close="detailModalState = false"
        ></detail-modal>

        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            :show-all="false"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <jkPopupOption
            :value="searchParams.processCode"
            :show="selectProcessPopupOptionState"
            :optionList="processList"
            :option-id-key-name="'code'"
            @visible-change="(e) => selectProcessPopupOptionState = e"
            @confirm="onConfirmOfSelectProcess"
        ></jkPopupOption>
	</view>
</template>

<script>
import {
    machineManagerMachineGetHumiture,
    machineManagerMachineGetRunState,
} from "../../../api";
	import detailModal from './components/detailModal';
	import {
		pageConfig
	} from "../../../utils/jk-utils";
    import jkPopup from "../../../jk-components/jk-popup";
    import jkPopupOption from "../../../jk-components/jk-popup-option";
	export default {
		components: {
            jkPopupOption,
            jkPopup,
			detailModal
		},
		data() {
			return {
                runningCount: 0,
                errorCount: 0,
                selectWorkshopPopupOptionState: false,
                selectProcessPopupOptionState: false,
                interVal: {},
				workshopList: [],
				contentLoading: false,
				detailModalState: false,
				selectedMachineItem: {},
                totalCount: 0,
                searchParams: {
					pageNo: 1,
					pageSize: pageConfig.pageSize,
					machineNameOrCode: '',
					workshopId: null,
					workshopName: '',
					processCode: '',
					processName: ''
				},
                stateList: {
                    0: { name: '离线', color: '#808695', icon: 'el-icon-warning-outline', count: 0 },
                    2: { name: '开机', color: '#19be6b', icon: 'el-icon-video-play', count: 0 },
                    3: { name: '待机', color: '#ff9900', icon: 'el-icon-video-pause', count: 0 },
                },
                areaList: [
                    {
                        name: '前纺一楼',
                        processList: [
                            {
                                processName: '清花',
                                temHum: 'TH16',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '梳棉',
                                temHum: 'TH14',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '并条',
                                temHum: 'TH16',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '粗纱',
                                temHum: 'TH15',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            }
                        ]
                    },
                    {
                        name: '前纺二楼',
                        processList: [
                            {
                                processName: '梳棉',
                                temHum: 'TH12',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '并条',
                                temHum: 'TH10',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '粗纱',
                                temHum: 'TH11',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'A区',
                        processList: [
                            {
                                processName: '细纱',
                                temHum: 'TH20',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '络筒',
                                temHum: 'TH16',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 74, status: true }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'B区',
                        processList: [
                            {
                                processName: '细纱',
                                temHum: 'TH21',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '络筒',
                                temHum: 'TH22',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'C区',
                        processList: [
                            {
                                processName: '细纱',
                                temHum: 'TH09',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '络筒',
                                temHum: 'TH09',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'D区',
                        processList: [
                            {
                                processName: '细纱',
                                temHum: 'TH07',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '络筒',
                                temHum: 'TH07',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'E区',
                        processList: [
                            {
                                processName: '细纱',
                                temHum: 'TH03',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            },
                            {
                                processName: '络筒',
                                temHum: 'TH03',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            }
                        ]
                    },
                    {
                        name: '二楼倍捻',
                        processList: [
                            {
                                processName: '倍捻',
                                temHum: 'TH05',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            }
                        ]
                    },
                    {
                        name: '三楼倍捻',
                        processList: [
                            {
                                processName: '倍捻',
                                temHum: 'TH06',
                                thList: [
                                    { name: '温度', icon: 'el-icon-s-opportunity', setRange: '0~0', val: 0, status: true },
                                    { name: '湿度', icon: 'el-icon-heavy-rain', setRange: `0~0`, val: 0, status: true }
                                ]
                            }
                        ]
                    }
                ],
                machineMonitorList: []
			}
		},
		methods: {
            onConfirmOfSelectProcess(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'processCode', item.code);
                this.$set(this.searchParams, 'processName', item.name);
                this.selectProcessPopupOptionState = false;
                this.contentLoading = true;
                this.getListRequest();
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.selectWorkshopPopupOptionState = false;
                this.contentLoading = true;
                this.getListRequest();
            },
			onDetailBtn(areaIdx, processIdx) {
				// this.selectedMachineItem = item;
				// this.detailModalState = true;
                let str = '';
                this.areaList[areaIdx].processList[processIdx].thList.forEach(x => {
                    str+=x.name + ': ' + x.setRange + ';'
                });
				uni.showModal({
                    title: '设定值',
                    showCancel: false,
                    confirmText: '关闭',
                    content: str
                });
			},
			setMachineState(item) {
				let config = {};
                config.color = this.stateList[item.state].color;
                return config;
			},
            clearInterVal() {
                clearInterval(this.interVal);
            },
            run() {
			    this.clearInterVal();
			    this.interVal = setInterval(() => {
			        this.getListRequest();
                }, 2000);
            },
			async getDependentData() {
				this.contentLoading = true;
                this.workshopList = getApp().globalData.defaultWorkshop.list;
				await this.getListRequest();
				this.contentLoading = false;
			},
			getListRequest() {
			    if (this.searchParams.workshopId) {
                    return machineManagerMachineGetHumiture().then(res => {
                        this.contentLoading = false;
                        if (res.data.status === 200) {
                            const resData = res.data.res || [];
                            this.areaList.forEach(areaItem => {
                                areaItem.processList.forEach(processItem => {
                                    resData.forEach(machineItem => {
                                        if (processItem.temHum === machineItem.machineCode) {
                                            processItem.thList[0].val = machineItem.temperature;
                                            processItem.thList[1].val = machineItem.humidity;

                                            machineItem.monitoringParams.forEach(paramItem => {
                                                if (paramItem.typeName === '温度') {
                                                    processItem.thList[0].setRange = `${paramItem.minValue}~${paramItem.maxValue}`;
                                                    if (machineItem.temperature > paramItem.minValue && machineItem.temperature < paramItem.maxValue) {
                                                        processItem.thList[0].status = false;
                                                    } else {
                                                        processItem.thList[0].status = true;
                                                    }
                                                } else if (paramItem.typeName === '湿度') {
                                                    processItem.thList[1].setRange = `${paramItem.minValue}~${paramItem.maxValue}`;
                                                    if (machineItem.humidity > paramItem.minValue && machineItem.humidity < paramItem.maxValue) {
                                                        processItem.thList[1].status = false;
                                                    } else {
                                                        processItem.thList[1].status = true;
                                                    }
                                                }
                                            });
                                        }
                                    });
                                });
                            });
                            this.calErrorCount();
                        }
                    });
                }
			},
            calErrorCount() {
                this.errorCount = 0;
                this.runningCount = 0;
                this.areaList.forEach(areaItem => {
                    areaItem.processList.forEach(processItem => {
                        processItem.thList.forEach(thItem => {
                            if (thItem.status) {
                                this.errorCount++;
                            } else {
                                this.runningCount++;
                            }
                        });
                    });
                });
            }
		},
        onLoad() {
            if (!this.searchParams.workshopId) {
                this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
                this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
            }
        },
        onUnload() {
            this.clearInterVal();
        },
        onHide() {
            this.clearInterVal();
        },
        onShow() {
            this.getDependentData();
            this.run();
        }
	}
</script>
<style lang="scss" scoped>
	.hover-class {
		background: rgba(92, 107, 227, .3) !important;
		//color: #fff;
	}

	.machine-monitor-content {
		width: 100%;
		height: 100vh;
        overflow: auto;

		.monitor-content {
			padding: 0 32rpx 32rpx 32rpx;

			.category-item {
				margin-top: 20rpx;

				.category-item-list-container {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.process-item {
						width: calc(100% / 2);
						height: 164rpx;
                        border-top: solid 1rpx #eee;
                        border-left: solid 1rpx #eee;
						border-bottom: solid 1rpx #eee;
						box-sizing: border-box;
						font-size: 24rpx;
                        background: #fff;
                        margin-bottom: 20rpx;
                        .process-item-title {
                            width: 100%;
                            height: 64rpx;
                            font-size: 28rpx;
                            border-bottom: solid 1rpx #eee;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            .process-item-th {
                                height: 40rpx;
                                line-height: 40rpx;
                                font-size: 22rpx;
                                color: #c5c8ce;
                                position: absolute;
                                right: 20rpx;
                                top: 50%;
                                margin-top: -20rpx;
                            }
                        }
                        .process-item-content {
                            width: 100%;
                            height: calc(100% - 64rpx);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            .process-item_th-item {
                                width: 100%;
                                display: flex;
                                padding: 0 8rpx;
                                box-sizing: border-box;
                                margin: 4rpx 0;
                                .process-item-content-val {
                                    width: 50%;
                                    color: black;
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    white-space: nowrap;
                                }
                                .process-item-content-set-val {
                                    width: 50%;
                                    color: #808695;
                                    font-size: 24rpx;
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    white-space: nowrap;
                                }
                            }
                        }
					}

				}
                .category-item-list-container .process-item:last-child {
                    border-right: solid 1rpx #eee;
                }

				.category-item-header {
					height: 48rpx;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.category-item-process-name {
						font-size: 30rpx;
					}

					.category-item-process-icon {
						width: 8rpx;
						height: 100%;
						background: #3c9cff;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}

				}
			}

		}
        .legend-box {
            border-radius: 20rpx;
            background: #708bf5;
            display: flex;
            justify-content: space-between;
            align-content: center;

            .legend-box-item {
                width: calc(100% / 2);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 12rpx 0;

                .legend-box-item-title {
                    color: #bdc9fa;
                    font-size: 24rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .legend-box-item-circle {
                        width: 10rpx;
                        height: 10rpx;
                        background: #3c9cff;
                        border-radius: 50%;
                        margin-right: 10rpx;
                    }
                }

                .legend-box-val {
                    margin-top: 10rpx;
                    color: #fff;
                    font-size: 36rpx;
                    font-weight: 700;
                }
            }
        }

		.header-box {
			width: 100%;
			height: 84rpx;
			background: #5267F6;
			position: relative;
			display: flex;
			justify-content: center;

			.header-box-item {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.header-box-item-title {
					color: #c5c8ce;
					font-size: 24rpx;
				}

				.header-box-item-val {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					margin-right: 8rpx;
				}
			}

		}
	}
</style>
